<template>
  <div class="news-detail">
    <TopInfo />
    <TopTabs />
    <div class="content">
      <div class="news-content">
        <div class="header-info">
          <!-- <p class="header-title">{{ newData.EntName }}</p> -->
          <div class="header-content">
            <div class="content-info fl">
              <div class="line1">{{ newData.EntName }}</div>
              <!-- <div class="line2">地区：湖南省</div> -->
              <div class="line3">
                <span class="fl">法定代表人：{{ newData.LegalPerson }}</span>
                <span class="fl">注册资本：{{ newData.PaidinCapital }}</span>
                <span class="fl">成立日期：{{ newData.StartDate }}</span>
                <span class="fl long"
                  >统一社会信用码：{{ newData.UnifiedCode }}</span
                >
              </div>
              <div class="line3">
                <span class="fl">电话：{{ newData.Telephone }}</span>
                <span class="fl">邮箱：{{ newData.Email }}</span>
                <span class="fl">官网：{{ Website }}</span>
                <!-- <span class="fl">官网：<a :href="item.Website" target="_blank">{{ item.Website }}</a></span> -->
              </div>
              <div class="line2">地址：{{ newData.RegAddr }}</div>
            </div>
          </div>
        </div>
        <div class="tabs-info">
          <el-tabs type="border-card">
            <el-tab-pane label="工商信息">
              <ul class="gsxx">
                <li><span>企业名称</span>{{ Gsxx.EntName }}</li>
                <li><span>法人</span>{{ Gsxx.LegalPerson }}</li>
                <li><span>统一社会信用码</span>{{ Gsxx.UnifiedCode }}</li>
                <li><span>电话</span>{{ Gsxx.Telephone }}</li>
                <li><span>邮箱</span>{{ Gsxx.Email }}</li>
                <li><span>企业类型</span>{{ Gsxx.EntType }}</li>
                <li><span>成立日期</span>{{ Gsxx.StartDate }}</li>
                <li><span>注册资本</span>{{ Gsxx.RegCapital }}</li>
                <li><span>实缴资本</span>{{ Gsxx.PaidinCapital }}</li>
                <li><span>经营状态</span>{{ Gsxx.OpenStatus }}</li>
                <li><span>注册地址</span>{{ Gsxx.RegAddr }}</li>
                <li><span>核准日期</span>{{ Gsxx.AnnualDate }}</li>
                <li><span>行业</span>{{ Gsxx.Industry }}</li>
                <li><span>工商注册号</span>{{ Gsxx.LicenseNumber }}</li>
                <li><span>组织机构码</span>{{ Gsxx.OrgNo }}</li>
                <li><span>营业期限</span>{{ Gsxx.OpenTime }}</li>
                <li><span>参保人</span>{{ Gsxx.InsuranceNum }}</li>
                <li><span>登记机关</span>{{ Gsxx.Authority }}</li>
                <li><span>经营范围</span>{{ Gsxx.Scope }}</li>
                <li><span>简介</span>{{ Gsxx.Introduce }}</li>
              </ul>
            </el-tab-pane>
            <el-tab-pane label="股东信息">
              <div>
                <el-table :data="GdxxTableData" border style="width: 100%">
                  <el-table-column prop="ShareholderName" label="股东名称">
                  </el-table-column>
                  <el-table-column prop="Scale" label="持股比例">
                  </el-table-column>
                  <el-table-column prop="SubMoney" label="认缴">
                  </el-table-column>
                  <el-table-column prop="PaidinMoney" label="实缴">
                  </el-table-column>
                </el-table>
                <el-pagination
                  style="margin-top: 20px"
                  :hide-on-single-page="true"
                  background
                  layout="total, prev, pager, next"
                  @current-change="handleIndexChangeGdxx"
                  :total="Gdxxtotal"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane label="变更记录">
              <div>
                <el-table :data="BgjlTableData" border style="width: 100%">
                  <el-table-column prop="ChangeDate" label="变更日期">
                  </el-table-column>
                  <el-table-column prop="ChangeItem" label="变更项目">
                  </el-table-column>
                  <el-table-column prop="BeforeChange" label="变更前">
                  </el-table-column>
                  <el-table-column prop="AfterChange" label="变更后">
                  </el-table-column>
                </el-table>
                <el-pagination
                  style="margin-top: 20px"
                  :hide-on-single-page="true"
                  background
                  layout="total, prev, pager, next"
                  @current-change="handleIndexChangeBgjl"
                  :total="Bgjltotal"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane>
              <div slot="label">
                <el-badge :value="Sbtotal == 0 ? null : Sbtotal" class="item">
                  <div>商标</div>
                </el-badge>
              </div>
              <div>
                <el-table :data="SbTableData" border style="width: 100%">
                  <el-table-column label="商标">
                    <template slot-scope="scope">
                      <img :src="scope.row.MarkLogo" width="40" height="40" />
                    </template>
                  </el-table-column>
                  <el-table-column prop="MarkName" label="商标名称">
                  </el-table-column>
                  <el-table-column prop="MarkRegNo" label="注册号">
                  </el-table-column>
                  <el-table-column prop="MarkType" label="国际分类">
                  </el-table-column>
                  <el-table-column prop="ApplyDate" label="申请日期">
                  </el-table-column>
                  <el-table-column prop="FirstPubdate" label="初审公告日期">
                  </el-table-column>
                  <el-table-column prop="VerificationDate" label="注册公告日期">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        v-if="scope.row.Info"
                        @click="handleClickSb(scope.row, true)"
                        type="text"
                        size="small"
                        >详情</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  style="margin-top: 20px"
                  :hide-on-single-page="true"
                  background
                  layout="total, prev, pager, next"
                  @current-change="handleIndexChange"
                  :total="Sbtotal"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane>
              <div slot="label">
                <el-badge :value="Rztotal == 0 ? null : Rztotal" class="item">
                  <div>软著</div>
                </el-badge>
              </div>
              <div>
                <el-table :data="RzTableData" border style="width: 100%">
                  <el-table-column prop="RegistrationNo" label="注册号">
                  </el-table-column>
                  <el-table-column prop="Name" label="作品名称">
                  </el-table-column>
                  <el-table-column prop="FirstDate" label="首次发表日期">
                  </el-table-column>
                  <el-table-column prop="RegistrationDate" label="登记日期">
                  </el-table-column>
                  <el-table-column prop="RegistrationNo" label="版本号">
                  </el-table-column>
                  <el-table-column prop="Type" label="行业分类">
                  </el-table-column>
                </el-table>
                <el-pagination
                  style="margin-top: 20px"
                  :hide-on-single-page="true"
                  background
                  layout="total, prev, pager, next"
                  @current-change="handleIndexChangeRz"
                  :total="Rztotal"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane>
              <div slot="label">
                <el-badge :value="Zltotal == 0 ? null : Zltotal" class="item">
                  <div>专利</div>
                </el-badge>
              </div>
              <div>
                <el-table :data="ZlTableData" border style="width: 100%">
                  <el-table-column prop="PatentName" label="专利名称">
                  </el-table-column>
                  <el-table-column prop="PublicationNumber" label="公布号">
                  </el-table-column>
                  <el-table-column prop="PatentType" label="专利类型">
                  </el-table-column>
                  <el-table-column prop="InventorNameList" label="发明人">
                  </el-table-column>
                  <el-table-column prop="PublicationDate" label="发布日期">
                  </el-table-column>
                  <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button
                        v-if="scope.row.Info"
                        @click="handleClickSb(scope.row, false)"
                        type="text"
                        size="small"
                        >详情</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
                <el-pagination
                  style="margin-top: 20px"
                  :hide-on-single-page="true"
                  background
                  layout="total, prev, pager, next"
                  @current-change="handleIndexChangeZl"
                  :total="Zltotal"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane>
              <div slot="label">
                <el-badge :value="Wztotal == 0 ? null : Wztotal" class="item">
                  <div>网站</div>
                </el-badge>
              </div>
              <div>
                <el-table :data="WzTableData" border style="width: 100%">
                  <el-table-column prop="Domain" label="域名">
                  </el-table-column>
                  <el-table-column prop="SiteName" label="网站名称">
                  </el-table-column>
                  <el-table-column prop="IcpNo" label="备案号">
                  </el-table-column>
                  <el-table-column prop="HomeSite" label="首页地址">
                  </el-table-column>
                </el-table>
                <el-pagination
                  style="margin-top: 20px"
                  :hide-on-single-page="true"
                  background
                  layout="total, prev, pager, next"
                  @current-change="handleIndexChangeWz"
                  :total="Wztotal"
                >
                </el-pagination>
              </div>
            </el-tab-pane>
            <el-tab-pane>
              <div slot="label">
                <el-badge
                  :value="Ryzztotal == 0 ? null : Ryzztotal"
                  class="item"
                >
                  <div>荣誉资质</div>
                </el-badge>
              </div>
              <div v-if="IsReg">
                <el-table :data="RyzzTableData" border style="width: 100%">
                  <el-table-column prop="TypeName" label="类型">
                  </el-table-column>
                  <el-table-column prop="CertNo" label="证书编号">
                  </el-table-column>
                  <el-table-column prop="HDate" label="获得日期">
                  </el-table-column>
                  <el-table-column prop="Name" label="姓名"> </el-table-column>
                  <el-table-column prop="Ext1" label="扩展1"> </el-table-column>
                  <el-table-column prop="Ext2" label="扩展2"> </el-table-column>
                  <el-table-column prop="Ext3" label="扩展3"> </el-table-column>
                </el-table>
                <el-pagination
                  style="margin-top: 20px"
                  :hide-on-single-page="true"
                  background
                  layout="total, prev, pager, next"
                  @current-change="handleIndexChangeRyzz"
                  :total="Ryzztotal"
                >
                </el-pagination>
              </div>
              <div v-else style="text-align: center; padding: 50px 0">
                <el-button type="primary" @click="SingOn">登录后查看</el-button>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <BottomInfo />
    <Sign :dialogFormVisible="status" @closepop="ClosePop" />
    <el-dialog
      title="详情"
      :show-close="true"
      :visible.sync="dialogVisibleSb"
      width="80%"
    >
      <ul class="detail-list" v-if="IsSb">
        <li>
          <span>商标</span
          ><el-image
            style="width: 50px; height: 50px"
            :src="ViewBag.trademarkImageUrl"
            fit="fill"
          ></el-image>
        </li>
        <li><span>商标名称</span>{{ ViewBag.trademarkName }}</li>
        <li><span>申请/注册号</span>{{ ViewBag.licenseNumber }}</li>
        <li><span>国际分类</span>{{ ViewBag.trademarkTypeCode1 }}</li>
        <li><span>申请日期</span>{{ ViewBag.issueDate }}</li>
        <li>
          <span>商标状态</span>{{ ViewBag.trademarkRegistrationStatusText }}
        </li>
        <li><span>申请人地址（中文）</span>{{ ViewBag.domicile }}</li>
        <li><span>状态</span>{{ ViewBag.licenseStatusCode }}</li>
        <li>
          <span>专用权期限</span>{{ ViewBag.validityFrom }}至{{
            ViewBag.validityTo
          }}
        </li>
        <li><span>办理/代理机构</span>{{ ViewBag.agent }}</li>
        <li><span>初审公告日期</span>{{ ViewBag.firstPubdate }}</li>
        <li><span>注册公告日期</span>{{ ViewBag.verificationDate }}</li>
        <li><span>商标类型</span>{{ ViewBag.trademarkCategoryCode }}</li>
        <li><span>商标/服务项目</span>{{ ViewBag.trademarkTypeCode3Name }}</li>
        <li style="width: 100%; overflow: hidden" v-if="ViewBag != {}">
          <span style="float: left">商标进度</span>
          <el-timeline style="float: left" v-if="ViewBag != {}">
            <el-timeline-item :timestamp="ViewBag.trademarkBar.oneStatus.time">
              注册申请
            </el-timeline-item>
            <el-timeline-item :timestamp="ViewBag.trademarkBar.twoStatus.time">
              初审公告
            </el-timeline-item>
            <el-timeline-item
              :timestamp="ViewBag.trademarkBar.threeStatus.time"
            >
              已注册
            </el-timeline-item>
            <el-timeline-item :timestamp="ViewBag.trademarkBar.fourStatus.time">
              终止
            </el-timeline-item>
          </el-timeline>
        </li>
      </ul>
      <ul class="detail-list" v-else>
        <li><span>专利名称</span>{{ ViewBag.patentName }}</li>
        <li><span>申请号</span>{{ ViewBag.patentAppNumber }}</li>
        <li><span>申请日期</span>{{ ViewBag.applicationDate }}</li>
        <li><span>公布/公告号</span>{{ ViewBag.publicationNumber }}</li>
        <li><span>公布/公告日期</span>{{ ViewBag.publicationDate }}</li>
        <li><span>发明人</span>{{ ViewBag.inventorNameList }}</li>
        <li><span>专利申请人</span>{{ ViewBag.patentHolderNameList }}</li>
        <li><span>专利代理人</span>{{ ViewBag.patentAgencyPerson }}</li>
        <li><span>专利代理机构</span>{{ ViewBag.patentAgencyName }}</li>
        <li><span>专利类型</span>{{ ViewBag.patentType }}</li>
        <li><span>主分类号</span>{{ ViewBag.patentTypeNumber }}</li>
        <li><span>住所</span>{{ ViewBag.address }}</li>
        <li><span>法律状态</span>{{ ViewBag.patentLegalStatusHistory }}</li>
        <li><span>摘要</span>{{ ViewBag.patentAbstract }}</li>
      </ul>
    </el-dialog>
  </div>
</template>

<script>
import BottomInfo from "../components/BottomInfo";
import Sign from "../components/Sign";
import TopInfo from "../components/TopInfo";
import TopTabs from "../components/TopTabs";
export default {
  name: "CompanyDetail",
  data() {
    return {
      dialogVisibleSb: false,
      id: "",
      status: false,
      IsSb: true,
      newData: {},
      Website: "",
      newId: "",
      ViewBag: {
        trademarkBar: {
          oneStatus: { time: "" },
          twoStatus: { time: "" },
          threeStatus: { time: "" },
          fourStatus: { time: "" },
        },
      },
      matchingData: [],
      GdxxTableData: [],
      BgjlTableData: [],
      SbTableData: [],
      RzTableData: [],
      ZlTableData: [],
      WzTableData: [],
      RyzzTableData: [],
      Gsxx: {},
      Sbtotal: 0,
      SbPage: 1,
      Gdxxtotal: 0,
      GdxxPage: 1,
      Bgjltotal: 0,
      BgjlPage: 1,
      Rztotal: 0,
      RzPage: 1,
      Zltotal: 0,
      ZlPage: 1,
      Wztotal: 0,
      WzPage: 1,
      Ryzztotal: 0,
      RyzzPage: 1,
      IsReg: false,
      // isCollect: false,
    };
  },
  components: {
    TopInfo,
    TopTabs,
    BottomInfo,
    Sign,
  },
  mounted() {
    // console.log(this.$cookies.get("newdata"));
    this.newId = this.$cookies.get("NewId");
    this.Website = this.$cookies.get("Website");
    this.GetInfo();
  },
  methods: {
    SingOn() {
      this.status = true;
    },
    ClosePop() {
      this.status = false;
    },
    GetInfo() {
      this.GetGsxx();
      this.GetGdxx();
      this.GetBgjl();
      this.GetSb();
      this.GetRz();
      this.GetZl();
      this.GetWz();
      this.GetRyzz();
    },
    GetGsxx() {
      this.$axios({
        url: "/Ent/GetEntInfo",
        method: "post",
        data: {
          id: this.newId,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          this.Gsxx = res.data.data[0];
          this.newData = res.data.data[0];
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    GetGdxx() {
      //console.log(value);
      // this.keywords = value;
      // this.searchArr = [];
      this.$axios({
        url: "/Ent/GetEntShareholdersList",
        method: "post",
        data: {
          entid: this.newId,
          limit: 10,
          page: this.GdxxPage,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          this.GdxxTableData = res.data.data ? res.data.data : [];
          this.Gdxxtotal = res.data.count ? res.data.count : 0;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    GetBgjl() {
      //console.log(value);
      // this.keywords = value;
      // this.searchArr = [];
      this.$axios({
        url: "/Ent/GetEntChangeRecordLists",
        method: "post",
        data: {
          entid: this.newId,
          limit: 10,
          page: this.BgjlPage,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          this.BgjlTableData = res.data.data ? res.data.data : [];
          this.Bgjltotal = res.data.count ? res.data.count : 0;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    GetSb() {
      this.$axios({
        url: "/Ent/GetEnttrademarkLists",
        method: "post",
        data: {
          entid: this.newId,
          limit: 10,
          page: this.SbPage,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          this.SbTableData = res.data.data ? res.data.data : [];
          // let SbJson = res.data.data[0].Info;
          // console.log(JSON.parse(SbJson));
          this.Sbtotal = res.data.count ? res.data.count : 0;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    GetRz() {
      this.$axios({
        url: "/Ent/GetEntCopyrightLists",
        method: "post",
        data: {
          entid: this.newId,
          limit: 10,
          page: this.RzPage,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          this.RzTableData = res.data.data ? res.data.data : [];
          this.Rztotal = res.data.count ? res.data.count : 0;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    GetZl() {
      this.$axios({
        url: "/Ent/GetEntPatentLists",
        method: "post",
        data: {
          entid: this.newId,
          limit: 10,
          page: this.ZlPage,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          this.ZlTableData = res.data.data ? res.data.data : [];
          this.Zltotal = res.data.count ? res.data.count : 0;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    GetWz() {
      this.$axios({
        url: "/Ent/GetEntWebsiteLists",
        method: "post",
        data: {
          entid: this.newId,
          limit: 10,
          page: this.WzPage,
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          this.WzTableData = res.data.data ? res.data.data : [];
          this.Wztotal = res.data.count ? res.data.count : 0;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    GetRyzz() {
      this.$axios({
        url: "/Ent/GetHonorList",
        method: "post",
        data: {
          entid: this.newId,
          limit: 10,
          page: this.RyzzPage,
          userdata: this.$cookies.get("userdata"),
        },
        transformRequest: [
          function (data) {
            let ret = "";
            for (let it in data) {
              ret +=
                encodeURIComponent(it) +
                "=" +
                encodeURIComponent(data[it]) +
                "&";
            }
            return ret;
          },
        ],
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
      })
        .then((res) => {
          if (res.data.code == -1) {
            this.IsReg = false;
          } else {
            this.IsReg = true;
          }
          this.RyzzTableData = res.data.data ? res.data.data : [];
          this.Ryzztotal = res.data.count ? res.data.count : 0;
        })
        .catch((err) => {
          //console.log(err);
        });
    },
    handleClickSb(row, issb) {
      if (issb) {
        this.IsSb = true;
      } else {
        this.IsSb = false;
      }
      // console.log(JSON.parse(row.Info));
      this.dialogVisibleSb = true;
      this.ViewBag = JSON.parse(row.Info);
    },
    ToResourceDetail(item) {
      this.newData = item;
    },
    handleIndexChange(current) {
      // console.log(current);
      this.SbPage = current;
      this.GetSb();
    },
    handleIndexChangeGdxx(current) {
      // console.log(current);
      this.GdxxPage = current;
      this.GetGdxx();
    },
    handleIndexChangeBgjl(current) {
      // console.log(current);
      this.BgjlPage = current;
      this.GetBgjl();
    },
    handleIndexChangeRz(current) {
      // console.log(current);
      this.RzPage = current;
      this.GetRz();
    },
    handleIndexChangeZl(current) {
      // console.log(current);
      this.ZlPage = current;
      this.GetZl();
    },
    handleIndexChangeWz(current) {
      // console.log(current);
      this.WzPage = current;
      this.GetWz();
    },
    handleIndexChangeRyzz(current) {
      // console.log(current);
      this.RyzzPage = current;
      this.GetRyzz();
    },
  },
};
</script>

<style scoped>
.content {
  background-color: #f4f6fc;
  padding: 25px 0;
  min-height: 500px;
}
.news-content {
  width: 1200px;
  margin: 0 auto;
}
.header-info {
  padding: 30px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
}
.tabs-info {
  /* padding: 30px; */
  margin-top: 30px;
  box-sizing: border-box;
}
.header-title {
  font-weight: bold;
  color: #333;
  font-size: 32px;
}
.header-content {
  /* margin-top: 30px; */
  overflow: hidden;
}
.content-info {
  width: 100%;
  background: #f6fafe;
  box-sizing: border-box;
  padding: 20px 30px;
  font-size: 16px;
  color: #333;
}
/* .content-info > div {
  line-height: 40px;
}
.content-info > div > i {
  margin-right: 10px;
  color: #095aff;
  float: left;
  position: relative;
  top: 11px;
  font-size: 18px;
} */
.content-info .line1 {
  font-weight: bold;
  font-size: 22px;
  margin-bottom: 20px;
}
.content-info .line2 {
  /* margin-bottom: 10px; */
}
.content-info .line3 {
  margin-bottom: 10px;
  overflow: hidden;
}
.content-info .line3 span.fl {
  width: 22%;
}
.content-info .line3 span.long {
  width: 32%;
}
.save i {
  color: #ffd34c;
  font-size: 30px;
  cursor: pointer;
}
.save {
  position: relative;
  top: 38px;
  right: 40px;
}
.bodyer-info {
  margin-top: 20px;
  overflow: hidden;
}
.lefter-info {
  width: 100%;
  min-height: 600px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
  box-sizing: border-box;
  margin-bottom: 50px;
  padding: 30px;
  font-size: 18px;
  /* color: #333; */
}
.p-title {
  font-weight: bold;
  font-size: 20px;
  color: #333;
  position: relative;
  margin: 20px 0;
  padding-left: 15px;
  box-sizing: border-box;
}
.p-title::after {
  content: "";
  position: absolute;
  width: 3px;
  height: 18px;
  background-color: #095aff;
  top: 7px;
  left: 0px;
}
.righter-info {
  width: 320px;
  min-height: 600px;
  background: #ffffff;
  box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
  box-sizing: border-box;
  margin-bottom: 50px;
  padding: 10px 30px;
  color: #999999;
  font-size: 16px;
}
.news-list li {
  padding: 10px 0;
  border-top: 1px solid #dcdcdc;
  box-sizing: border-box;
  padding-left: 20px;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-list li::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 0;
  width: 6px;
  height: 6px;
  background: #999999;
  border-radius: 50%;
}
.gsxx,
.detail-list {
  overflow: hidden;
  padding: 0 50px;
}
.gsxx li,
.detail-list > li {
  float: left;
  width: 50%;
  margin-bottom: 15px;
  color: #666;
  box-sizing: border-box;
  padding: 0 10px;
}
.gsxx li span,
.detail-list > li > span {
  display: inline-block;
  width: 100px;
  text-align: right;
  margin-right: 20px;
}
.detail-list > li > span {
  width: 140px;
}
.count-tip {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid rgb(0, 255, 98);
}
</style>
